{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-between mb-3">
    <h4>{{ dict_type }}管理</h4>
    <button class="btn btn-primary" onclick="showEditModal('new')">新建{{ dict_type }}</button>
</div>

<table class="table table-hover">
    <thead class="table-light">
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% for item in items %}
        <tr>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
            <td>
                <button class="btn btn-sm btn-outline-secondary" onclick="showEditModal('edit', {{ item.id }}, '{{ item.name }}')">编辑</button>
                <button class="btn btn-sm btn-outline-danger" onclick="confirmDelete({{ item.id }})">删除</button>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<!-- 弹出页面 -->
<div class="modal fade" id="editModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="dictForm" onsubmit="return submitForm(event)">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" id="dictId">
                    <div class="mb-3">
                        <label class="form-label">名称</label>
                        <input type="text" class="form-control" name="name" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// 显示编辑弹窗
function showEditModal(mode, id=null, name=null) {
    const modal = new bootstrap.Modal('#editModal');
    document.getElementById('modalTitle').textContent = mode === 'new' ? '新建{{ dict_type }}' : '编辑{{ dict_type }}';
    document.getElementById('dictId').value = id || '';
    document.querySelector('input[name="name"]').value = name || '';
    modal.show();
}

// 提交表单
async function submitForm(e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    const response = await fetch(`/dict/{{ dict_type }}`, {
        method: 'POST',
        body: new URLSearchParams(formData)
    });
    
    const result = await response.json();
    if (result.status=="success") {
        location.reload();
    } else {
        alert(result.message || '操作失败');
    }
}

// 删除操作
async function confirmDelete(id) {
    if (confirm('确定要删除吗？')) {
        const response = await fetch(`/dict/{{ dict_type }}`, {
            method: 'DELETE',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: new URLSearchParams({id})
        });
        
        if (response.ok) {
            location.reload();
        }
    }
}
</script>
{% endblock %}